<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body bgcolor="#9900CC">
<script src="../js/ajax.js" language="javascript">
<script type="text/javascript" language="javascript">
function verifyuser(){
	createRequest();
	var name= document.getElementById("username").value;
	var cod=document.getElementById("cod").value;
	if( name == null || name == "" ){
		usable=false;
		document.getElementById("messageusercheck").innerText="username can't be empty";
 	  return;
	}
	request.open("GET","../register.verify?username="+name+"&cod="+cod+"",true);
	request.onreadystatechange = updatePage;
	request.send(null);
}
function updatePage()
{
	if(request.readyState == 4 )
	{
		if (request.getResponseHeader('usable') == 'true')
		{
			usable=true;
		}
		document.getElementById('messageusercheck').innerText = request.getResponseHeader('message');
	}
}
function verifypassword()
{
	if(document.getElementById("password").value=="")
	{
		document.getElementById("passwordcheck").innerText="password is empty";
		return false;
	}
	var length=document.getElementById("password").value.length;
	if(length<5)
	{
		document.getElementById("passwordcheck").innerText="password is too short";
		return false;
	}
	if((document.getElementById("password").value)!=(document.getElementById("confirmpassword").value))
	{
		document.getElementById("passwordcheck").innerText="two password entry not match";
		return false;
	}
	document.getElementById("passwordcheck").innerText="";
	return true;
}
function verifyemail()
{
    var email=document.getElementById("email").value;
    if (email=="")
	{
		document.getElementById("emailcheck").innerText="E-mail address is obligation";
        return false;
	}
    else
    {
        var pattern=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
		if (pattern.test(email))
		{
			document.getElementById("emailcheck").innerText="";
			return true;
		}
	    else
		{
			document.getElementById("emailcheck").innerText="email address illegal";
			return false;
		}
    }
}
function check()
{
	if (!verifypassword())
	{
		return false;
	}
	if (!verifyemail())
	{
		return false;
	}
	if((String)session.getAttribute("cod").equals(document.getElementById("cod").getValue))
	{
		alert("validation code not match");
		return false;
	}
	return true;
}
</script>
<table width="545" height="34">
	<tr>
		<td><img src="../images/registep-1.png"
			style="width: 185px; height: 24px; vertical-align: bottom; border: none; filter: progid :   DXImageTransform.Microsoft.alpha(opacity=100 ); opacity: 1" /></td>
		<td><img src="../images/registep-2.png"
			style="width: 75px; height: 24px; vertical-align: bottom; border: none; filter: progid :   DXImageTransform.Microsoft.alpha(opacity=50 ); opacity: 0.5" /></td>
		<td><img src="../images/registep-3.png"
			style="width: 75px; height: 24px; vertical-align: bottom; border: none; filter: progid :   DXImageTransform.Microsoft.alpha(opacity=50 ); opacity: 0.5" /></td>
		<td><img src="../images/registep-4.png"
			style="width: 75px; height: 24px; vertical-align: bottom; border: none; filter: progid :   DXImageTransform.Microsoft.alpha(opacity=50 ); opacity: 0.5" /></td>
		<td><img src="../images/registep-5.png"
			style="width: 105px; height: 24px; vertical-align: bottom; border: none; filter: progid :   DXImageTransform.Microsoft.alpha(opacity=50 ); opacity: 0.5" /></td>
	</tr>
	<tr>
		<td colspan="5" style="padding: 5px 5px 5px 5px;">
		<form:form commandName="users" onsubmit="return check();">
			<table style="width: 535px; background-color: #FFFFFF">
				<tr>
					<td style="text-align: right"><input type="image"
						style="margin-left: auto; margin-right: auto;"
						name="_eventId_cancel" value="Cancel" /></td>
				</tr>
				<tr>
					<td style="text-align: center">
					<table>
						<tr>
							<td>Name</td>
							<td><form:input path="userName" /></td><td><div id="messageusercheck"></div></td>
						</tr>
						<tr>
							<td>Password</td>
							<td><form:input path="passWord" /></td><td></td>
						</tr>
						<tr>
							<td>Confirm Password</td>
							<td><input type="password" id="confirmpassword" /></td><td><div id="passwordcheck"></div></td>
						</tr>
						<tr>
							<td>Email</td>
							<td><form:input path="email" /><form:hidden path="birthday" /></td><td><div id="emailcheck"></div></td>
						</tr>
						<tr>
							<td>Validation Code:</td>
							<td><input type="text" id="cod" /></td><td></td>
						</tr>
						<tr>
							<td colspan="3"><img src="../cod.jpg" style="vertical-align: bottom; border: none;"></td>
						</tr>
					</table>
					</td>
				</tr>
				<tr>
					<td style="text-align: right"><input type="image"
						style="margin-left: auto; margin-right: auto;"
						name="_eventId_next" value="Next" /></td>
				</tr>
			</table>

		</form:form></td>
	</tr>
</table>
</body>
</html>